<template>
  <div class="box">
    <div class="table" v-loading="isLoading">
      <h3 class="textAlign">{{tableInfo.xmmc}}</h3>
      <h3 class="textAlign">入库核查备案申请表</h3>
      <p
        class="textAlign littleTitle"
      >{{tableInfo.district}}国土整备申[{{tableInfo.year}}]{{tableInfo.bah}}号;</p>
      <div class="table_content">
        <table class="table_table" border cellspacing="0" width="60%">
          <caption class="textRight">
            <el-button type="primary" size="small" plain @click="btnEdit" v-if="isBtnFlag">编辑</el-button>
            <el-button type="primary" size="small" plain @click="download">下载</el-button>
          </caption>

          <tr>
            <td class="tr" colspan="2">项目名称</td>
            <td colspan="5">{{tableInfo.xmmc}}</td>
          </tr>
          <tr>
            <td colspan="2">位置及四至范围</td>
            <td colspan="5">
              <el-input
                v-model="submitInfo.place"
                class="table_tr_input"
                type="textarea"
                :rows="3"
                resize="none"
                :readonly="isReadOnly"
                placeholder=""
              ></el-input>
            </td>
          </tr>
          <tr>
            <td colspan="2">建设规模（公顷）</td>
            <td colspan="5">{{tableInfo.jsgm}}</td>
          </tr>

          <tr>
            <td colspan="2">主要建设内容</td>
            <td colspan="5">
              <el-input
                type="textarea"
                :rows="3"
                class="table_tr_input"
                resize="none"
                :readonly="isReadOnly"
                placeholder=""
                v-model="submitInfo.mainContent"
              ></el-input>
            </td>
          </tr>
          <tr>
            <td colspan="2">新增耕地面积(公顷)及新增耕地率(%)</td>
            <td colspan="5">{{tableInfo.xzgdl}}</td>
          </tr>
          <tr>
            <td colspan="2">建设工期</td>
            <td colspan="5">
              {{tableInfo.planConstructingStartTime}}-{{tableInfo.planConstructingEndTime}}
              <!-- <el-input :readonly="isReadOnly" class="table_tr_input" placeholder="请输入内容" v-model="submitInfo.jsgq"></el-input> -->
            </td>
          </tr>
          <tr>
            <td colspan="2">投资规模及投资结构(万元，%)</td>
            <td colspan="5">
              总投入{{tableInfo.ztr}}万元, 其中工程建设费用{{tableInfo.gcjsfy}}万元, 占总投资的{{tableInfo.gcjsfyzb}} , 其他费用{{tableInfo.qtfy}} 万元,占总投资的{{tableInfo.qtfyzb}}
              <!-- <el-input type="textarea" :rows="3" class="table_tr_input" resize="none" :readonly="isReadOnly" placeholder="请输入内容" v-model="submitInfo.tzgm"></el-input> -->
            </td>
          </tr>
          <tr>
            <td colspan="2">新增耕地亩均投资(万元)</td>
            <td colspan="5">{{tableInfo.xzgdmjtz}}</td>
          </tr>
          <tr>
            <td colspan="2">建设规模亩均投资(万元)</td>
            <td colspan="5">{{tableInfo.jsgmmjtz}}</td>
          </tr>
          <tr>
            <td colspan="2">资金来源</td>
            <td colspan="5">
              <el-input
                v-model="submitInfo.moneySources"
                class="table_tr_input"
                placeholder=""
                :readonly="isReadOnly"
              ></el-input>
            </td>
          </tr>
          <tr>
            <td colspan="2">法人代表</td>
            <td>
              <el-input
                v-model="submitInfo.farenDaibiao"
                class="table_tr_input"
                placeholder=""
                :readonly="isReadOnly"
              ></el-input>
            </td>
            <td>联系电话</td>
            <td>
              <el-input
                v-model="submitInfo.tel"
                class="table_tr_input"
                placeholder=""
                :readonly="isReadOnly"
              ></el-input>
            </td>
            <td>手机</td>
            <td colspan="2">
              <el-input
                v-model="submitInfo.phone"
                class="table_tr_input"
                placeholder=""
                :readonly="isReadOnly"
              ></el-input>
            </td>
          </tr>
          <tr>
            <td colspan="2">通信地址</td>
            <td colspan="5">
              <el-input
                v-model="submitInfo.address"
                class="table_tr_input"
                placeholder=""
                :readonly="isReadOnly"
              ></el-input>
            </td>
          </tr>
          <tr>
            <td colspan="2">传真</td>
            <td>
              <el-input
                v-model="submitInfo.faxes"
                class="table_tr_input"
                placeholder=""
                :readonly="isReadOnly"
              ></el-input>
            </td>
            <td colspan="2">邮政编码</td>
            <td colspan="2">
              <el-input
                v-model="submitInfo.postCode"
                class="table_tr_input"
                placeholder=""
                :readonly="isReadOnly"
              ></el-input>
            </td>
          </tr>
          <tr class="textLeft">
            <td colspan="3">
              <p>项目承担单位意见：</p>
              <div>{{tableInfo.xmcddwyj}}</div>
              <!-- <el-input type="textarea" :rows="3" resize="none" :readonly="isReadOnly" placeholder="请输入意见" v-model="submitInfo.uinteOpinion"></el-input> -->
            </td>
            <td colspan="4">
              <p>区县国土资源行政主管部门意见：</p>
              <div>{{tableInfo.qxxzbmyj}}</div>
              <!-- <el-input type="textarea" :rows="3" resize="none" :readonly="isReadOnly" placeholder="请输入意见" v-model="submitInfo.QuxianGtOpinion"></el-input> -->
            </td>
          </tr>
          <tr>
            <td colspan="2">区县中心审查时间</td>
            <td colspan="2">{{tableInfo.qxzxscsj}}</td>
            <td colspan="2">区县局审查时间</td>
            <td>{{tableInfo.qxjscsj}}</td>
          </tr>
          <tr class="textRight">
            <td colspan="7">
              <el-button type="primary" size="small" plain @click="btnSubmit" v-if="!isReadOnly">保存</el-button>
              <el-button type="primary" size="small" plain @click="btnNext" v-if="isBtnFlag">提交申请表</el-button>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getTable,
  queryProjectStoringRecordTable,
  storingApplicationEdit,
  districtCenterOpinionCommit
} from "@/api/storageForRecordInfo";
export default {
  data() {
    return {
      tableInfo: "",

      isFlag: false,
      isReadOnly: true, //文本是否可编辑

      submitInfo: {
        place: "", //位置及四至范围
        mainContent: "", //主要建设内容
        // startTime:'',//建设工期
        //endTime:'',
        jsgq: "", //建设工期
        tzgm: "", //投资规模及投资结构(万元，%)
        moneySources: "", //资金来源
        farenDaibiao: "", //法人代表
        tel: "", //联系电话
        phone: "", //手机
        address: "", //通信地址
        faxes: "", //传真
        postCode: "", //邮政编码
        uinteOpinion: "", //项目承担单位意见
        QuxianGtOpinion: "" //区县国土资源行政主管部门意见
      },
      isLoading: false,

      isBtnFlag: false
    };
  },
  created() {
    this.getInfo();
    if (
      localStorage.getItem("router") ==
      "STORING_RECORD_FIRST_AUDIT_FIRST_OPINION"
    ) {
      if (localStorage.getItem("menusName") == "ROLE_QXZZJG") {
        this.isBtnFlag = true;
      } else {
        this.isBtnFlag = false;
      }
    } else {
      this.isBtnFlag = false;
    }
  },
  methods: {
    btnNext() {
      //下一步
      let obj = {
        projectId: localStorage.getItem("projectId")
      };
      districtCenterOpinionCommit(obj).then(res => {
        if (res.code == 1000) {
          this.$confirm("是否确认提交入库核查备案申请表？", "提示", {
            confirmButtonText: "确定",
            type: "success"
          })
            .then(() => {
              this.$router.push({
                path: "/xmkgh/ywdeal"
              });
            })
            .catch(() => {});
        }
      });
    },
    btnSubmit() {
      //保存
      let obj = {
        projectId: localStorage.getItem("projectId"),
        wzjszfw: this.submitInfo.place,
        zyjsnr: this.submitInfo.mainContent,
        // jsgq: this.submitInfo.jsgq,
        // tzgmjtzjg: this.submitInfo.tzgm,
        zjly: this.submitInfo.moneySources,
        frdb: this.submitInfo.farenDaibiao,
        lxdh: this.submitInfo.tel,
        phone: this.submitInfo.phone,
        txdz: this.submitInfo.address,
        fax: this.submitInfo.faxes,
        yzbm: this.submitInfo.postCode
        // txdz:this.submitInfo.address,
      };
      console.log(obj, "obj");
      this.isLoading = true;
      storingApplicationEdit(obj)
        .then(res => {
          console.log(res, "bianji");
          if (res.code == 1000) {
            this.$message({
              message: "保存成功",
              type: "success"
            });
            this.getInfo();
            this.isReadOnly = true;
            this.isLoading = false;
            this.isBtnFlag=true
          }
        })
        .catch(error => {
          this.isLoading = false;
        });
    },
    btnEdit() {
      //是否编辑
      this.isReadOnly = false;
      this.isBtnFlag=false
    },
    //下载入库备案表
    download() {
      var a = document.createElement("a");
      a.setAttribute(
        "href",
        this.$https +
          "/pc/project/storing_record_first_audit_opinion/opinion_review?projectId=" +
          localStorage.getItem("projectId")
      );
      a.click();
    },
    getInfo() {
      //入库备案申报查询
      let obj = {
        projectId: localStorage.getItem("projectId")
      };
      queryProjectStoringRecordTable(obj).then(res => {
        console.log(res, "12");
        if (res.data != null) {
          this.tableInfo = res.data;
          this.submitInfo = {
            place: res.data.wzjszfw, //位置及四至范围
            mainContent: res.data.zyjsnr, //主要建设内容
            jsgq: res.data.jsgq, //建设工期
            tzgm: res.data.tzgmjtzjg, //投资规模及投资结构(万元，%)
            moneySources: res.data.zjly, //资金来源
            farenDaibiao: res.data.frdb, //法人代表
            tel: res.data.lxdh, //联系电话
            phone: res.data.phone, //手机
            address: res.data.txdz, //通信地址
            faxes: res.data.fax, //传真
            postCode: res.data.yzbm //邮政编码
            //uinteOpinion:res.data.xmcddwyj,//项目承担单位意见
            // QuxianGtOpinion:res.data.qxxzbmyj,//区县国土资源行政主管部门意见
          };
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  margin: 30px;
}
.tableBoxData_title {
  width: 100%;
  display: block;
  overflow: hidden;
  font-size: 20px;
  font-weight: bold;
  color: #444;
  text-align: center;
  margin-bottom: 20px;
}

.textAlign {
  text-align: center;
}
.textLeft {
  text-align: left;
}
.littleTitle {
  font-size: 16px;
  color: #333;
}
.table_content {
  text-align: center;
}
.table_table {
  margin: auto;
  color: #333;
}
.tr {
  width: 20%;
}
.textRight {
  text-align: right;
  padding: 10px 20px;
}
.border {
  border: 0;
}
.table_table tr {
  border: 0;
}
.table_table tr td {
  padding: 10px;
}
.table_tr_input {
  min-width: 180px;
}
</style>